<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增预算')" />
    <th:block th:include="include :: datetimepicker-css" />
    <style>
        :root {
            --primary-color: #5e72e4;  /* 主色调 - 紫色 */
            --secondary-color: #2dce89; /* 辅助色 - 绿色 */
            --accent-color: #f5365c;   /* 强调色 - 红色 */
            --dark-color: #32325d;     /* 深色 */
            --light-color: #f8f9fe;    /* 浅色背景 */
            --text-color: #525f7f;     /* 正文颜色 */
        }

        body {
            font-family: 'Noto Serif SC', serif;
            background-color: var(--light-color);
            color: var(--text-color);
        }

        .wrapper-content {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            padding: 30px;
            margin: 20px;
        }

        .form-horizontal .control-label {
            font-weight: 600;
            color: var(--dark-color);
            padding-top: 8px;
            text-align: right;
        }

        .form-control {
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 10px 15px;
            height: 40px;
            transition: all 0.3s;
            box-shadow: none;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.1);
        }

        .input-group {
            width: 100%;
        }

        .input-group-addon {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-left: none;
            border-radius: 0 6px 6px 0;
            color: #8898aa;
            transition: all 0.3s;
        }

        .input-group.date .input-group-addon {
            cursor: pointer;
        }

        .input-group.date .input-group-addon:hover {
            background-color: var(--primary-color);
            color: white;
        }

        select.form-control {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238898aa'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 16px;
        }

        .is-required:after {
            content: "*";
            color: var(--accent-color);
            margin-left: 4px;
        }

        .ibox-content {
            border: none;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .form-horizontal .control-label {
                text-align: left;
                margin-bottom: 5px;
            }

            .wrapper-content {
                padding: 20px;
                margin: 10px;
            }
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-budget-add">
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">用户管理：</label>
                <div class="col-sm-8">
                    <span th:text="${userString}" class="form-control-static" style="display: inline-block; padding-top: 7px;"></span>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">收支类别：</label>
                <div class="col-sm-8">
                    <select id="categoryId" name="categoryId" class="form-control" required>
                        <option value="">-- 请选择收支类别--</option>
                        <option th:each="category : ${categories}"
                                th:value="${category.categoryId}"
                                th:text="${category.categoryId + ' (' + category.categoryName + ')'}">
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">预算金额：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <span class="input-group-addon">¥</span>
                        <input name="budgetAmount" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">预算月份：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="budgetMonth" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var prefix = ctx + "system/budget"
    $("#form-budget-add").validate({
        focusCleanup: true,
        errorClass: "help-block error",
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-budget-add').serialize());
        }
    }

    $("input[name='budgetMonth']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true,
        todayBtn: true,
        todayHighlight: true
    });
</script>
</body>
</html>